<template lang="pug">
  .select-calendar(v-show='isShow', @click='stopPropagation()', :style='topCss')
    .select-calendar-day
      i.icon.iconfont.prevYear.icon-zuosanjiao2(@click='prevYear ()')
      i.icon.iconfont.prevMonth.icon-zuosanjiao1(@click='prevMonth ()') &#xe94d;
      span.month {{optionYear}}年{{optionMonth}}月
      i.icon.iconfont.nextMonth.icon-yousanjiao1(@click='nextMonth ()') &#xe947;
      i.icon.iconfont.nextYear.icon-yousanjiao2(@click='nextYear ()') &#xe948;
    div
      ol.calendar-week
        li 日
        li 一
        li 二
        li 三
        li 四
        li 五
        li 六
        li(v-for='option in optionList', @click='selectedCurrentDay(option)', :class='[{ colorGray: !(option.isNowMonth), selectDay: isSelectedDay(option) }]')
          | {{option.day}}
    .calendar-time(v-show='timeIsShow')
      span 时间点：
      input.time-hour-min(maxlength='2', type='text', v-model='hour', @keyup="hour = dealTime(hour)", @blur="hour = dealTime(hour)")
      span ：
      input.time-hour-min(maxlength='2', type='text', v-model='min', @keyup="min = dealTime(min)", @blur="min = dealTime(min)")
    .calendar-btn
      .calendar-close(@click='closeBox()') 取消
      .calendar-sure(@click='selectedDaySubmit()') 确定

</template>

<script>
export default {
  data () {
    return {
      selectedDay: new Date(),
      optionTime: new Date(),
      optionList: [],
      hour: '00',
      min: '00'
    }
  },
  props: {
    isShow: {
      type: Boolean,
      required: true
    },
    timeIsShow: {
      type: Boolean,
      default: false
    },
    dftTomorrow: {
      type: Boolean,
      default: false
    },
    topCss: {
      type: String,
      required: false
    },
    index: Number
  },
  created: function () {
    this.selectedDay = this.dftTomorrow ? new Date(new Date().getTime() + 1000 * 60 * 60 * 24) : new Date()
    this.changeTime()
    if (this.index === 1) {
      this.hour = '23'
      this.min = '59'
    }
  },
  computed: {
    optionMonth () {
      let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      let chins = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
      return chins[nums.indexOf(this.optionTime.getMonth() + 1)]
    },
    optionYear () {
      return this.optionTime.getFullYear()
    }
  },
  methods: {
    stopPropagation () {
      event.stopPropagation()
    },
    isSelectedDay (option) {
      return (this.selectedDay.getFullYear() === option.year &&
        this.selectedDay.getMonth() === (option.month - 1) &&
        this.selectedDay.getDate() === option.day)
    },
    changeTime () {
      this.optionList = []
      let _firstDay = new Date(this.optionTime.getFullYear(), this.optionTime.getMonth(), 1)
      for (let i = 0; i < 42; i++) {
        let _thisDay = new Date(this.optionTime.getFullYear(), this.optionTime.getMonth(), i + 1 - _firstDay.getDay())
        let isNowMonth = false
        if (_thisDay.getMonth() === _firstDay.getMonth()) {
          isNowMonth = true
        }
        this.optionList.push({
          'year': _thisDay.getFullYear(),
          'month': _thisDay.getMonth() + 1,
          'day': _thisDay.getDate(),
          'isNowMonth': isNowMonth
        })
      }
    },
    prevYear () {
      this.optionTime.setFullYear(this.optionTime.getFullYear() - 1)
      this.optionTime = new Date(this.optionTime.getFullYear(), this.optionTime.getMonth(), 1)
      this.changeTime()
    },
    prevMonth () {
      this.optionTime.setMonth(this.optionTime.getMonth() - 1)
      // console.log(this.optionTime.getMonth())
      this.optionTime = new Date(this.optionTime.getFullYear(), this.optionTime.getMonth(), 1)
      this.changeTime()
    },
    nextYear () {
      this.optionTime.setFullYear(this.optionTime.getFullYear() + 1)
      this.optionTime = new Date(this.optionTime.getFullYear(), this.optionTime.getMonth(), 1)
      this.changeTime()
    },
    nextMonth () {
      this.optionTime.setMonth(this.optionTime.getMonth() + 1)
      this.optionTime = new Date(this.optionTime.getFullYear(), this.optionTime.getMonth(), 1)
      this.changeTime()
    },
    selectedCurrentDay (option) {
      this.selectedDay = new Date(option.year, option.month - 1, option.day)
    },
    closeBox () {
      this.$emit('closeBox')
    },
    selectedDaySubmit () {
      if (!this.timeIsShow) {
        this.$emit('changeOption', this.formatDate(this.selectedDay, 'yyyy-MM-dd'))
      } else {
        this.hour = Number(this.hour) > 23 ? '23' : (Number(this.hour) < 10 && this.hour.length === 1 ? '0' + this.hour : this.hour)
        this.min = Number(this.min) > 59 ? '59' : (Number(this.min) < 10 && this.min.length === 1 ? '0' + this.min : this.min)
        this.$emit('changeOption', this.formatDate(this.selectedDay, 'yyyy-MM-dd') + ' ' + (this.hour || '00') + ':' + (this.min || '00'))
      }
    },
    formatDate (date, fmt) {
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        'S': date.getMilliseconds()
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (let k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    },
    dealTime (num) {
      return num.replace(/\D/g, '00')
    }
  },
  watch: {
    dftTomorrow (val) {
      this.selectedDay = val ? new Date(new Date().getTime() + 1000 * 60 * 60 * 24) : new Date()
    }
  }
}
</script>

<style scoped lang="stylus">
  ol, li
    list-style none
    margin 0
    padding 0
  .calendar-week
    margin 5px 5px
    background-color white
  .calendar-week li
    float left
    cursor pointer
    width 25px
    height 25px
    line-height 25px
    margin 0 3px
    text-align center
  .colorGray
    color darkgray
  .selectDay
    background-color #0085d0
  .select-calendar
    position absolute
    border 1px solid gainsboro
    width 230px
    left -1px
    background-color white
    margin-top 3px
    z-index 11111
    font-size 14px
  .select-calendar-day
    display flex
    align-items center
    justify-content center
    background-color #0085d0
    color white
    width 230px
    text-align center
    line-height 40px
    height 40px
    span
      flex none
  .select-calendar-day i
    height 40px
    line-height 40px
    font-size 12px
    cursor pointer
    color white !important
  .select-calendar-day .month
    margin-right 2px
  .select-calendar-day .prevMonth
    margin-left 5px
    margin-right 3px
  .select-calendar-day .nextMonth
    margin-left 3px
    margin-right 5px
  .calendar-btn
    clear both
    text-align center
    display flex
  .calendar-close
    margin 10px 20px 10px 30px
    display inline-block
    width 78px
    height 28px
    line-height 28px
    color #0085d0
    background-color white
    border 1px solid #0085d0
  .calendar-sure
    display inline-block
    width 80px
    height 30px
    line-height 30px
    color white
    background-color #0085d0
    margin-bottom 10px
    margin-top 10px
  .calendar-btn
    clear both
    text-align center
  .time-hour-min
    border 1px solid gainsboro
    padding 0 5px
    font-size 12px
    box-sizing border-box
    color #5e5e5e
    display inline-block
    height 32px
    width 70px
</style>
